<template>
  <div class="withdrawalForm page page" ref="webview">
    <van-nav-bar title="提现" left-arrow class="bg_white" right-text="提现记录" @click-left="$router.go(-1)" @click-right="$router.push({path: '/withdrawal'})" />
    <div class="content">
      <div class="bk active van-hairline--bottom" @click="goSelectAccount">
        <span class="label" style="width: auto">请选择提现收款方式</span>
        <div class="name" v-if="list.length > 0" :class="{active: selectAccount}">{{selectAccount}}</div>
        <div class="name c2" v-else>添加帐号</div>
      </div>
      <van-field v-model="withdrawalAmount" @input="inputChange" type="number" clearable placeholder="请输入提现金额">
        <span slot="button" class="text">可提现{{walletInfo.balance | toDecimalByCutoffWithoutOmit}}</span>
      </van-field>
      <van-field v-model="payPassword" clearable type="password" placeholder="请输入支付密码" maxlength="6">
        <span slot="button" v-if="!userInfo.isSetPayPass" class="setPassword" @click="goPay">设置支付密码</span>
      </van-field>
      <div class="text-info">提现税点：{{ walletInfo.serviceFeeRatio }}%</div>
      <div class="text-info" v-if="walletInfo.frozenMoney" style="color: #FF0000;">
        需复购：{{ walletInfo.frozenMoney | toDecimalByCutoffWithoutOmit }}元，填写收货地址后系统将自动补单<br>
        可提现金额已扣除需复购金额
      </div>
    </div>
    <div class="submitAdd">
      <van-button class="btn" round @click="withdrawApplyFinish">确认提现</van-button>
    </div>
    <van-popup v-model="isSelect" :duration="duration" position="bottom" get-container="body">
      <van-picker :columns="list" show-toolbar :default-index="defaultIndex" title="提现帐号列表" @cancel="isSelect= false" @confirm="pickerConfirm" />
    </van-popup>
  </div>
</template>
<script>
import md5 from 'md5';
import { mapGetters } from 'vuex';
export default {
  name: 'withdrawalForm',
  data () {
    return {
      duration: 0.2,
      isSelect: false,
      password: null,
      withdrawalAmount: null,
      accountNo: '',
      payPassword: null,
      accountId: null,
      bankName: '',
      list: [],
      defaultIndex: 0,
      walletInfo: {},
      selectAccount: ''
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.withdrawApplyFirst();
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    pickerConfirm (data, index) {
      this.selectAccount = data;
      this.defaultIndex = index;
      this.isSelect = false;
      this.accountId = this.walletInfo.bankList[index].id;
    },
    inputChange () {
      this.withdrawalAmount = this.withdrawalAmount > this.walletInfo.balance ? this.walletInfo.balance : this.withdrawalAmount;
    },
    // 提现第一步
    withdrawApplyFirst () {
      this.$API.user.withdrawApplyFirst().then(res => {
        if (!res.code) {
          this.walletInfo = res.data;
          this.list = res.data.bankList.map((item, index) => {
            return item.bank_name + '-' + item.account_no;
          });
        }
      });
    },
    goSelectAccount () {
      if (this.list.length > 0) {
        this.isSelect = true;
      } else {
        this.$router.push({ 'path': '/bankcard' });
      }
    },
    // 提现第二步
    withdrawApplyFinish (data) {
      if (!this.accountId) {
        this.$toast('请选择收款账户');
        return;
      }
      if (!this.withdrawalAmount) {
        this.$toast('请输入提现金额');
        return;
      }
      if (this.withdrawalAmount < 100) {
        this.$toast('提现金额不能低于100元');
        return;
      }
      this.withdrawSecond();
      // this.$store.dispatch('setPayPassword', true);
    },
    goPay () {
      this.$router.push({ 'path': '/password/edit', query: { type: 2 } });
    },
    // 提交提现
    withdrawSecond (data) {
      const options = {
        amount: parseInt(this.withdrawalAmount),
        bankId: parseInt(this.accountId),
        payPass: md5(md5(this.payPassword + ''))
      };
      this.$API.user.withdrawApplyFinish(options).then(res => {
        if (!res.code) {
          this.$store.dispatch('setPayPassword', false);
          setTimeout(() => {
            this.$router.replace({ path: '/prompt', query: { type: 3 } });
          }, 200);
        } else {
          this.$toast(res.message);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.withdrawalForm {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    margin-top: 20px;
    .card {
      padding: 34px 42px;
      line-height: 38px;
      font-size: 28px;
      color: #353535;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;
      &::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 24px;
        position: absolute;
        right: 40px;
        background-image: url('/static/images/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 14px 24px;
        vertical-align: middle;
        margin-left: 32px;
      }
      .text {
        flex: 1;
        font-size: 34px;
        padding-left: 20px;
        margin-top: -1px;
      }
    }
    .box {
      margin: 0 43px;
      display: flex;
      .symbol {
        padding: 10px 20px;
        color: #353535;
        font-size: 60px;
        text-align: center;
      }
      .input {
        flex: 1;
      }
    }
    .info {
      padding: 25px 40px;
      font-size: 24px;
      font-weight: 300;
      color: #999;
    }
    .c2 {
      color: #125dff;
    }
    .setPassword {
      color: #125dff;
      padding-right: 30px;
      display: block;
      &::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 24px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -12px;
        background-image: url('/static/images/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 14px 24px;
        vertical-align: middle;
        margin-left: 32px;
      }
    }
    .text {
      color: #125dff;
    }
    .text-info {
      font-size: 28px;
      color: #125dff;
      padding: 25px 40px;
    }
  }
  .submitAdd {
    padding: 30px 50px;
    color: #fff;
    font-size: 32px;
    text-align: center;
    .btn {
      width: 100%;
      height: 90px;
      line-height: 90px;
      border: none;
      background-color: #fff;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
    }
  }
}
</style>
